<template>
  <div class="position">
    <span class="iconfont position_icon">&#xe619;</span>
    北京理工大学国防科技园2号楼10层
    北京理工大学国防科技园2号楼10层
    北京理工大学国防科技园2号楼10层
    北京理工大学国防科技园2号楼10层
    北京理工大学国防科技园2号楼10层
    <span class="iconfont position_notice">&#xe60b;</span>
    <div class="search">
      <span class="iconfont">&#xe62d;</span>
      <span class="search_text">山姆会员商店优惠商品</span>
    </div>
    <div class="banner">
      <img class="banner_img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg">
    </div>
    <div class="icons">
      <div class="icons_items" v-for="(item,index) in staticPartList" :key="index">
        <img class="icons_items_img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"/>
        <p class="icons_items_description">{{ item.text }}</p>
      </div>
    </div>
    <div class="gap"></div>
  </div>
</template>
<script>
export default {
  name: 'StaticPart',
  setup () {
    const staticPartList = [
      {
        imgName: '超市',
        text: '超市便利'
      },
      {
        imgName: '菜市场',
        text: '菜市场'
      },
      {
        imgName: '水果店',
        text: '水果店'
      },
      {
        imgName: '医药健康',
        text: '医药健康'
      },
      {
        imgName: '大牌免运',
        text: '大牌免运'
      },
      {
        imgName: '签到',
        text: '签到'
      },
      {
        imgName: '鲜花',
        text: '鲜花绿植'
      },
      {
        imgName: '家居',
        text: '家居时尚'
      },
      {
        imgName: '蛋糕',
        text: '烘培蛋糕'
      },
      {
        imgName: '红包',
        text: '红包套餐'
      }
    ]
    return { staticPartList }
  }
}

</script>
<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';

.position {
  @include ellipsis;
  padding: .16rem .24rem .16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  position: relative;

  .position_icon {
    position: relative;
    top: .01rem;
    font-size: .2rem;
  }

  .position_notice {
    position: absolute;
    top: .17rem;
    right: 0;
    font-size: .2rem;
  }

  color: $content-fontcolor;
}

.search {
  margin-bottom: .12rem;
  line-height: .32rem;
  background: $search-bgColor;
  color: #B7B7B7;
  border-radius: .16rem;

  .iconfont {
    position: relative;
    top: .01rem;
    display: inline-block;
    font-size: .2rem;
    padding: 0 .12rem 0 .16rem;
  }

  &_text {
    display: inline-block;
    font-size: .14rem;
  }
}

.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;

  &_img {
    width: 100%;
  }
}

.icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;

  &_items {
    width: 20%;

    &_img {
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }

    &_description {
      padding: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-fontcolor;
      font-size: .12rem;
    }
  }
}

.gap {
  margin: 0  -0.28rem;
  height: .1rem;
  background: $content-bgColor;;
}
</style>
